<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
    <script src="../libs/dat.gui.min.js" type="text/javascript"></script>
    <link href="../css/dat-gui-light-style.css" rel="stylesheet"/>
    <style>
        .xeokit-camera-pivot-marker {
            color: #ffffff;
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 15px;
            border: 2px solid #ebebeb;
            background: black;
            visibility: hidden;
            box-shadow: 5px 5px 15px 1px #000000;
            z-index: 10000;
            pointer-events: none;
        }
    </style>
</head>

<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div class="slideout-sidebar">
    <img class="info-icon" src="../../assets/images/laserScan.png"/>
    <h1>LASLoaderPlugin</h1>
    <h2>Loading a lidar point cloud with 31M colored points that is split into multiple files from LAS format</h2>
    <h3>Stats</h3>
    <ul>
        <li>
            <div id="time">Loading JavaScript modules...</div>
        </li>
    </ul>
    <h3>Customize points</h3>
    <div id="myDatGuiContainer"></div>
    <h3>Components used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/plugins/LASLoaderPlugin/LASLoaderPlugin.js~LASLoaderPlugin.html"
               target="_other">LASLoaderPlugin</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/materials/PointsMaterial.js~PointsMaterial.html"
               target="_other">PointsMaterial</a>
        </li>
    </ul>
    <h3>Resources</h3>
    <ul>
        <li><a href="https://loaders.gl/" target="_other">Model source</a></li>
    </ul>

</div>
</body>
<script type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {Viewer, LASLoaderPlugin, FastNavPlugin} from "../../dist/xeokit-sdk.min.es.js";

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true
    });

    viewer.scene.camera.eye = [635796.0612055798, 855416.1847290703, -3167.352900630285];
    viewer.scene.camera.look = [637290.78125, 851209.90625, 510.70001220703125];
    viewer.scene.camera.up = [0.273790165300491, 0.686401912000719, 0.673714598763072];

    viewer.scene.camera.project.far = 10000000;

    const pivotElement = document.createRange().createContextualFragment("<div class='xeokit-camera-pivot-marker'></div>").firstChild;
    document.body.appendChild(pivotElement);
    viewer.cameraControl.pivotElement = pivotElement;

    //------------------------------------------------------------------------------------------------------------------
    // Configure points material
    //------------------------------------------------------------------------------------------------------------------

    viewer.scene.pointsMaterial.pointSize = 2;
    viewer.scene.pointsMaterial.roundPoints = false;
    viewer.scene.pointsMaterial.perspectivePoints = true;
    viewer.scene.pointsMaterial.minPerspectivePointSize = 2;
    viewer.scene.pointsMaterial.maxPerspectivePointSize = 4;
    viewer.scene.pointsMaterial.filterIntensity = true;
    viewer.scene.pointsMaterial.minIntensity = 0;
    viewer.scene.pointsMaterial.maxIntensity = 1;

    new FastNavPlugin(viewer, {
        scaleCanvasResolution: true,      // Reduce canvas resolution while moving (default is false)
        scaleCanvasResolutionFactor: 0.5,
    });

    //----------------------------------------------------------------------------------------------------------------------
    // Install a LASLoaderPlugin, load a model, fit to view
    //----------------------------------------------------------------------------------------------------------------------

    const lasLoader = new LASLoaderPlugin(viewer, {
        skip: 10, // Load every 10th point
        fp64: false, // Positions expected in 32-bit floats instead of 64-bit
        colorDepth: "auto" // Whether colors encoded using 8 or 16 bits - accepted values are "auto", 8 and 16
    });

    const t0 = performance.now();

    document.getElementById("time").innerHTML = "Loading model...";

    const sceneModel = lasLoader.load({
        id: "myModel",
        manifestSrc: "../../assets/models/las/federated/autzen/autzen.laz.manifest.json",
        rotation: [-90, 0, 0],
    });

    sceneModel.on("loaded", () => {
        const t1 = performance.now();
        document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
    });

    //------------------------------------------------------------------------------------------------------------------
    // GUI to play with points material properties
    //------------------------------------------------------------------------------------------------------------------

    const pointsMaterial = viewer.scene.pointsMaterial;
    const camera = viewer.camera;

    const guiParams = new function () {
        this.roundPoints = pointsMaterial.roundPoints;
        this.pointSize = pointsMaterial.pointSize;
        this.perspectivePoints = pointsMaterial.perspectivePoints;
        this.minPerspectivePointSize = pointsMaterial.minPerspectivePointSize;
        this.maxPerspectivePointSize = pointsMaterial.maxPerspectivePointSize;
        this.filterIntensity = pointsMaterial.filterIntensity;
        this.minIntensity = pointsMaterial.minIntensity;
        this.maxIntensity = pointsMaterial.maxIntensity;
        this.perspective = (camera.projection === "perspective");
    }();

    const update = function () {
        pointsMaterial.roundPoints = guiParams.roundPoints;
        pointsMaterial.pointSize = guiParams.pointSize;
        pointsMaterial.perspectivePoints = guiParams.perspectivePoints;
        pointsMaterial.minPerspectivePointSize = guiParams.minPerspectivePointSize;
        pointsMaterial.maxPerspectivePointSize = guiParams.maxPerspectivePointSize;
        pointsMaterial.filterIntensity = guiParams.filterIntensity;
        pointsMaterial.minIntensity = guiParams.minIntensity;
        pointsMaterial.maxIntensity = guiParams.maxIntensity;
        camera.projection = guiParams.perspective ? "perspective" : "ortho";
        requestAnimationFrame(update);
    };

    update();

    const gui = new dat.GUI({autoPlace: false, width: "100%"});

    const pointsMaterialFolder = gui.addFolder('PointsMaterial');
    pointsMaterialFolder.add(guiParams, 'roundPoints');
    pointsMaterialFolder.add(guiParams, 'pointSize', 1, 50);
    pointsMaterialFolder.add(guiParams, 'perspectivePoints');
    pointsMaterialFolder.add(guiParams, 'minPerspectivePointSize', 1, 50);
    pointsMaterialFolder.add(guiParams, 'maxPerspectivePointSize', 1, 50);
    pointsMaterialFolder.add(guiParams, 'filterIntensity');
    pointsMaterialFolder.add(guiParams, 'minIntensity', 0.0, 1.0);
    pointsMaterialFolder.add(guiParams, 'maxIntensity', 0.0, 1.0);
    pointsMaterialFolder.open();

    const cameraFolder = gui.addFolder('Camera');
    cameraFolder.add(guiParams, 'perspective');
    cameraFolder.open();

    const customContainer = document.getElementById('myDatGuiContainer');
    customContainer.appendChild(gui.domElement);


</script>
</html>